<template>
  <v-bottom-navigation v-model="value" app shift color="#ff9859">

    <!--    <v-app-bar-nav-icon @click.stop="barNavIconClick"></v-app-bar-nav-icon>-->

    <v-btn @click.stop="barNavIconClick">
      <span class="gradient-text-one">菜单</span>
      <v-icon class="gradient-text-one">mdi-menu</v-icon>
    </v-btn>

    <!--    <v-btn>-->
    <!--      <span>入库</span>-->
    <!--      <v-icon>mdi-zend</v-icon>-->
    <!--    </v-btn>-->

    <v-btn @click.stop="tastyIndexIconClick">
      <span class="gradient-text-one">主页</span>
      <v-icon class="gradient-text-one">mdi-home</v-icon>
    </v-btn>

    <v-btn @click.stop="scanning">
      <span class="gradient-text-one">出库</span>
      <v-icon class="gradient-text-one">mdi-qrcode-scan</v-icon>
    </v-btn>

  </v-bottom-navigation>
</template>

<script>
  /**
   * 底部导航
   * @author Canaan
   * @date 2019/8/10 19:14.
   */
  export default {
    name: 'BottomNavigation',
    mounted() {

    },
    components: {},
    props: {},
    data() {
      return {
        value: 3
      }
    },
    computed: {},
    methods: {
      barNavIconClick() {
        this.$emit("barNavIconClick");
      },
      tastyIndexIconClick() {
        if (this.$route.path !== "/tastyIndex") {
          this.$router.push('/tastyIndex')
        }
      },
      scanning() {
        this.$android.barCodeScanning('popupInventory', res => {
          if (res.code === "ok") {

            this.$router.push({
              name: 'popupInventoryForm',
              params: {
                batchNo: res.data.content
              }
            });
            return;
          }
          this.$message.error(res.msg);
        });
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }

</script>

<style scoped>
  
  .gradient-text-one {
    background-image: -webkit-linear-gradient(bottom, red, #fd8403, rgb(248, 248, 56));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .theme--light.v-bottom-navigation .v-btn:not(.v-btn--active) {
      color: #fd8403 !important;
  }

</style>
